<template>
  <div class="ai-analysis">
    <div class="step-one">
      <AIComponents />
    </div>
    <div class="step-two">
      <div class="all-title">学生智能体考核评分批阅列表</div>
      <div class="all-box">
        <div class="two-search">
          <el-input
            v-model="form.word"
            clearable
            style="width: 240px"
            placeholder="输入关键信息"
          />
          <div class="all-btn" @click="search">搜索</div>
        </div>
        <div>
          <el-table
            :data="tableData"
            v-loading="loading"
            element-loading-text="加载中..."
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              type="index"
              width="100"
              :index="calculateIndex"
            ></el-table-column>
            <el-table-column prop="userName" label="学生姓名" width="200" />
            <el-table-column prop="userNumber" label="学号" width="200" />
            <el-table-column prop="status" label="作答状态" width="200" />
            <el-table-column prop="createTime" label="作答时间" width="300" />
            <el-table-column label="考核结果" width="200">
              <template #default="scope">
                <span>
                  {{
                    scope.row.sum === 0
                      ? ""
                      : `${scope.row.correctNum} / ${scope.row.sum}`
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <div class="table-btns">
                  <div @click="handleDetail(scope.row)">详情</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="all-page">
            <el-pagination
              v-model:current-page="form.page"
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="total"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="isShowAI"
      :close-on-click-modal="false"
      width="80%"
      align-center
      class="detail-dialog"
    >
      <div class="my-dialog">
        <div class="my-dialog-content">
          <Agent5 ref="agent5" :agentId="agentId" :userId="userId" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import eventBus from "@/utils/eventBus";
import AIComponents from "@/components/AIComponents.vue";
import Agent5 from "../../components/Agent5.vue";
export default {
  components: {
    AIComponents,
    Agent5,
  },
  data() {
    return {
      agentId: "",
      userId: "",
      active: 0,
      isShowAI: false,
      loading: false,
      total: 1000,
      form: {
        startTime: "",
        endTime: "",
        word: "",
        page: 1,
        limit: 10,
      },
      tableData: [],
    };
  },
  created() {
    this.agentId = Number(this.$route.query.id);
    this.getList();
    // 监听班级变更事件
    eventBus.on("classChanged", this.handleClassChanged);
  },
  beforeUnmount() {
    // 清理事件监听器
    eventBus.off("classChanged", this.handleClassChanged);
  },
  methods: {
    // 计算表格序号
    calculateIndex(index) {
      return (this.form.page - 1) * this.form.limit + index + 1;
    },

    // 处理班级变更事件
    handleClassChanged(newClassId) {
      this.classId = newClassId;
      this.form.page = 1; // 重置页码
      this.getList(); // 重新获取数据
    },
    search() {
      //如果结束日期小于起始日期，则提示错误，日期格式为YYYY-MM-DD，转换为时间戳
      if (new Date(this.form.startTime) > new Date(this.form.endTime)) {
        this.$message.error("结束日期不能小于起始日期");
        return;
      }
      this.form.page = 1;
      this.getList();
    },
    handleCurrentChange(currentPage) {
      this.form.page = currentPage;
      this.getList();
    },

    getList() {
      const data = {
        agentId: this.agentId,
        word: this.form.word || "",
      };
      this.loading = true;
      this.$axios
        .post(
          `/tes/dify/logs?page=${this.form.page}&limit=${this.form.limit}`,
          data
        )
        .then((response) => {
          const res = response;
          this.tableData = res.data.content;
          this.total = res.data.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    handleDetail(row) {
      if (row.status == "未提交") {
        this.$message.warning("暂无聊天记录");
        return;
      }
      this.userId = row.userId;
      this.isShowAI = true;
      this.$nextTick(() => {
        this.$refs.agent5.getMessages();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ai-analysis {
  position: relative;
  background-color: #f3f5fa;
  padding: 40px 30px;
  box-sizing: border-box;
  .step-one {
    margin-bottom: 62px;
  }
  .step-two {
    .all-box {
      padding: 38px 52px;
    }
    .two-search {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 34px;
      :deep(.el-input__inner) {
        height: 38px;
      }
      .all-btn {
        height: 36px;
        line-height: 36px;
      }
    }
    .el-table {
      margin-bottom: 20px;
      :deep(th) {
        color: #7a8cb0;
      }
      .table-btns {
        display: flex;
        gap: 20px;
        font-size: 14px;
        > div {
          cursor: pointer;
          color: #457aff;
          &:hover {
            color: #2657b8;
          }
        }
      }
    }
  }
  :deep(.el-dialog) {
    background: none;
    box-shadow: none;
    .my-dialog {
      padding: 10px 0;
    }
  }

  :deep(.detail-dialog) {
    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
  }
}
</style>